<!-- html -->
<template>
  <h2 class="h2">reactive，对象类型</h2>
  <span class="span2">num1：</span>
  <input class="input1" type="number" v-model="nums.num1">
  <span class="span2">num2：</span>
  <input class="input1" type="number" v-model="nums.num2">
  <button class="button1" @click="changeNum1">修改num1</button>
  <button class="button1" @click="showSum">查看和</button>
  <hr class="hr1">
  <li class="li1" v-for="item in numsArray" :key="item.id">num1：{{ item.num1 }}，num2：{{ item.num2 }}</li>
  <button class="button1" @click="changeFirstNum1">修改第一个num1</button>
  <button class="button1" @click="showFirstSum">查看第一个和</button>
  <button class="button1" @click="changeNumsArray">修改数组</button>
  <hr class="hr1">
  <span class="span2">obj：{{ obj.a.b.c }}</span>
  <button class="button1" @click="changeObj">修改obj</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'reactiveTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { reactive } from 'vue'
//数据
let nums = reactive({ num1: 1, num2: 1 })
let numsArray = reactive([
  { id: 1, num1: 1, num2: 1 },
  { id: 2, num1: 1, num2: 1 }
])
let obj = reactive({ a: { b: { c: 666 } } })
console.log('nums：', nums)
console.log('numsArray：', numsArray)
console.log('obj：', obj)
//方法
function changeNum1() {
  nums.num1 += 1
}
function showSum() {
  alert(nums.num1 + nums.num2)
}
function changeFirstNum1() {
  numsArray[0].num1 += 1
}
function showFirstSum() {
  alert(numsArray[0].num1 + numsArray[0].num2)
}
function changeNumsArray() {
  numsArray = [
    { id: 1, num1: 11, num2: 11 },
    { id: 2, num1: 11, num2: 11 }
  ]
}
function changeObj() {
  obj.a.b.c = 999
}
</script>

<!-- 样式 -->
<style scoped></style>